<template>
  <div>
    <h1>商品编辑</h1>
    <!-- <pre>{{ list }}</pre> -->
    <el-form>
      <el-form-item label="商品名称">
        <el-input
          style="width: 200px"
          v-model="list.name"
          :value="list.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input
          style="width: 200px"
          v-model="list.subtitle"
          :value="list.subtitle"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input
          style="width: 200px"
          v-model="list.price"
          :value="list.price"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input
          style="width: 200px"
          v-model="list.stock"
          :value="list.stock"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span>所属分类</span>
        <el-select v-model="from" placeholder="请选择一级品类" @change="getson">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in cateList"
            :key="index"
          ></el-option>
        </el-select>
        <el-select v-model="form" placeholder="请选择二级品类">
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in cateLists"
            :key="index"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          action="/api/product/upload.do"
          :on-success="handleAvatarSuccess"
          list-type="picture"
          :auto-upload="true"
          name="upload_file"
          :limit="1"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品描述">
        <quill-editor v-model="list.details"> </quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click='changeInfo'>提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { goods_edit, goods_editInfo,goods_cate, goods_cates } from "@/api/api";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      list: {
        categoryId: '',
        name: "",
        subtitle: "",
        subImages: "",
        detail: "",
        price: "",
        status: '',
        id: '',
      },
      cateList: [],
      cateLists: [],
      form:'',
      from:'',
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.$route.params.id);
  },
  mounted() {
    this.getlist();
    this.getcate();
  },
  methods: {
    async getlist() {
      const { data: res } = await goods_edit(
        `/api/product/detail.do?productId=${this.$route.params.id}`
      );
      this.list = res.data;
    },
    async changeInfo() {
      const { data: res } = await goods_editInfo(
        `/api/product/save.do?categoryId=${this.list.categoryId}&name=${this.list.name}&subtitle=${this.list.subtitle}&subImages${this.list.subImages}=&detail=${this.list.detail}&price=${this.list.price}&stock=${this.list.stock}&status=1&id=${this.list.id}`
      );
      this.$message.success(res.data);
      this.$router.push("/goodslist");
    },
    handleAvatarSuccess(response) {
      this.list.subImages = response.data.uri;
    },
            // 品类获取
    async getcate() {
      const res = await goods_cate();
        this.cateList = res.data.data;
    },
    async getson(id) {
      this.list.categoryId= id
      const { data: res } = await goods_cates(id);
      console.log(res);
      this.cateLists = res.data;
    },
  },
};
</script>
<style scoped>
</style>